<template>
  <view :class="[`${prefixCls}-tabbar-container`, `tabbar-item-${tabbarList.length}`]" v-if="tabbarList.length">
    <uv-tabbar
      :value="path"
      :fixed="true"
      :safeAreaInsetBottom="true"
      :placeholder="true"
      :border="false"
      :inactiveColor="tabbarBasic.inactiveColor"
      :activeColor="tabbarBasic.activeColor"
      @change="onChangeTabbar"
    >
      <uv-tabbar-item :name="v.path" :text="v.text" :dot="v.dot" :badge="v.badge" v-for="(v, i) of tabbarList" :key="i" @click="$ROUTE.go(v.path)">
        <template #active-icon>
          <image class="icon" :src="v.activeIcon"></image>
        </template>
        <template #inactive-icon>
          <image class="icon" :src="v.inactiveIcon"></image>
        </template>
      </uv-tabbar-item>
    </uv-tabbar>
  </view>
</template>

<script>
import { mapGetters } from 'vuex'

/**
 * https://www.uvui.cn/components/tabbar.html
 * cu-tabbar 底部菜单栏 基于 uv-tabbar
 * @description 该组件用于首页数据加载前显示骨架屏
 * @property {String}   path 菜单栏路径
 * @property {Object}   tabbarBasic 菜单栏默认配置
 * @property {Array}    tabbarList 菜单栏item项
 * @example <cu-tabbar ></cu-tabbar>
 */
export default {
  name: 'cuTabbar',
  components: {},
  mixins: [],
  props: {
    path: {
      type: String,
      default: '',
    },
  },
  data() {
    return {}
  },
  // 侦听属性
  watch: {},
  // 计算属性
  computed: {
    ...mapGetters(['tabbarConfig']),

    tabbarBasic() {
      return this.tabbarConfig.basic
    },
    tabbarList() {
      return this.tabbarConfig?.list || []
    },

    safeAreaInsetsBottom() {
      return this.$Platform.device.safeAreaInsets.bottom
    },
  },

  created() {},
  mounted() {},
  destroyed() {},
  options: {
    styleIsolation: 'shared',
  },
  methods: {
    onChangeTabbar(e) {
      this.$emit('change', e)
    },

    onClickItem(e) {
      this.$emit('click', e)
    },
  },
}
</script>

<style lang="scss" scoped>
.#{prefixCls('tabbar-container')} {
  position: relative;
  ::v-deep .uv-tabbar {
    .uv-tabbar__content {
      .uv-tabbar__content__item-wrapper {
        image.icon {
          width: 40rpx;
          height: 40rpx;
        }
      }
    }
  }
}

@for $i from 1 through 5 {
  @if $i < 3 {
    .#{prefixCls('tabbar-container')}.tabbar-item-#{$i} {
      ::v-deep .uv-tabbar {
        .uv-tabbar__content {
          align-items: center;
          background-color: transparent;
          .uv-tabbar__content__item-wrapper {
            margin-bottom: #{v-bind('safeAreaInsetsBottom>0?"0px":"20px"')};
            justify-content: center;
            background-color: #fff;
            border-radius: 50rpx;
            box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.03);
          }
        }
      }
    }
  }
}
</style>
